<template>
  <div id="openInstitutions">
    <div class="content">
      <div class="searchArea">
        <div class="searchchoose">
          <ul>
            <li
              class="listSpan"
              v-for="(item, index) in chooseLists"
              :key="index"
            >
              <span class="list-key">{{ item.title }}</span>
              <div class="more-search">
                <span
                  v-for="(type, typeIndex) in item.typeList"
                  class="linkStyle"
                  :style="{
                    color:
                      type === stateLists[index] ? 'rgba(255, 101, 0)' : '',
                  }"
                  @click="listBundle(type, index)"
                >
                  {{ type }}</span
                >
              </div>
              <div style="clear: both"></div>
            </li>
          </ul>
        </div>
        <div class="choose">
          <el-form :inline="true" :model="infoForm" class="demo-form-inline">
            <el-form-item>
              <el-select
                v-model="infoForm.batch"
                placeholder="请选择批次"
                style="width: 120px"
                @change="changeLineBatch"
              >
                <el-option
                  v-for="(item, index) in batchList"
                  :label="item.value"
                  :value="item.value"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="infoForm.type"
                placeholder="请选择文理科"
                style="width: 100px"
                @change="changeLineType"
              >
                <el-option
                  v-for="(item, index) in typeList"
                  :label="item.value"
                  :value="item.value"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="result">
        <div id="myTable" class="public_tbl">
          <el-table
            :data="resultLists"
            style="width: 100%"
            :header-cell-style="headClass"
          >
            <el-table-column label="开设院校" width="300" align="center">
              <template slot-scope="scope">
                <div class="name_des">
                  <div class="top_item">
                    <span class="float_l set_hoverl am_l">
                      <router-link
                        :to="`/college/${scope.row.unvId}`"
                        class="link_name clearfix"
                      >
                        {{ scope.row.name }}
                      </router-link>
                      <el-tag
                        type="danger"
                        size="small"
                        v-if="scope.row.nationFeature === '1'"
                        >国家特色专业</el-tag
                      >
                    </span>
                  </div>
                  <div class="bottom_item">
                    <span class="tag_item" v-text="infoForm.batch"></span>
                    <span class="tag_item">{{ scope.row.type }}</span>
                    <span class="tag_item">{{ scope.row.province }}</span>
                    <span class="tag_item" style="border: none">{{
                      scope.row.category
                    }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="历史录取">
              <el-table-column
                prop="year"
                label="2020"
                width="250"
                align="center"
              >
                <template slot-scope="scope">
                  <el-tooltip placement="top" effect="light">
                    <div slot="content" class="tips-content">
                      <span><span>最低分</span> / <span>最低位次</span></span>
                    </div>
                    <span>
                      <span
                        style="color: rgba(236, 0, 0); font-size: 16px"
                        v-show="scope.row.minScore !== null"
                        >{{ scope.row.minScore }}</span
                      >
                      <span
                        style="color: rgba(236, 0, 0); font-size: 16px"
                        v-show="scope.row.minScore === null"
                      >
                        --
                      </span>
                      <span style="color: #999">/</span>
                      <span
                        style="color: rgba(0, 165, 38); font-size: 16px"
                        v-show="scope.row.minSection !== null"
                        >{{ scope.row.minSection }}</span
                      >
                      <span
                        style="color: rgba(0, 165, 38); font-size: 16px"
                        v-show="scope.row.minSection === null"
                      >
                        --
                      </span>
                    </span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column
                prop="year"
                label="2019"
                width="250"
                align="center"
              >
                <template slot-scope="scope">
                  <el-tooltip placement="top" effect="light">
                    <div slot="content" class="tips-content">
                      <span><span>最低分</span> / <span>最低位次</span></span>
                    </div>
                    <span>
                      <span
                        style="color: rgba(236, 0, 0); font-size: 16px"
                        v-show="scope.row.minScore1 !== null"
                        >{{ scope.row.minScore1 }}</span
                      >
                      <span
                        style="color: rgba(236, 0, 0); font-size: 16px"
                        v-show="scope.row.minScore1 === null"
                      >
                        --
                      </span>
                      <span style="color: #999">/</span>
                      <span
                        style="color: rgba(0, 165, 38); font-size: 16px"
                        v-show="scope.row.minSection1 !== null"
                        >{{ scope.row.minSection1 }}</span
                      >
                      <span
                        style="color: rgba(0, 165, 38); font-size: 16px"
                        v-show="scope.row.minSection1 === null"
                      >
                        --
                      </span>
                    </span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column
                prop="year"
                label="2018"
                width="250"
                align="center"
              >
                <template slot-scope="scope">
                  <el-tooltip placement="top" effect="light">
                    <div slot="content" class="tips-content">
                      <span><span>最低分</span> / <span>最低位次</span></span>
                    </div>
                    <span>
                      <span
                        style="color: rgba(236, 0, 0); font-size: 16px"
                        v-show="scope.row.minScore2 !== null"
                        >{{ scope.row.minScore2 }}</span
                      >
                      <span
                        style="color: rgba(236, 0, 0); font-size: 16px"
                        v-show="scope.row.minScore2 === null"
                      >
                        --
                      </span>
                      <span style="color: #999">/</span>
                      <span
                        style="color: rgba(0, 165, 38); font-size: 16px"
                        v-show="scope.row.minSection2 !== null"
                        >{{ scope.row.minSection2 }}</span
                      >
                      <span
                        style="color: rgba(0, 165, 38); font-size: 16px"
                        v-show="scope.row.minSection2 === null"
                      >
                        --
                      </span>
                    </span>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  icon="el-icon-share"
                  @click="replace(scope.row)"
                  >查看院校详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-pagination
        class="pagination"
        @current-change="handleCurrentChange"
        :current-page="pagination.page"
        :page-size="pagination.size"
        layout="total, prev, pager, next"
        :total="pagination.count"
        background
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import throttling from "@/public/throttling.js";
export default {
  name: "college",
  props: ["id"],
  data() {
    return {
      // 首页用户名
      firsrName: "",
      showManager: false,
      showname: false,
      //初始分页条件
      pagination: {
        page: 1,
        count: 1,
        size: 10,
      },
      stateLists: ["全部", "全部", "全部", "全部"],
      schoolname: "",
      active: 0,
      img: require("@/assets/二维码.png"),
      name: "",
      active: 0,
      num: 0,
      activeIndex: "1",
      activeIndex2: "1",
      CollegeLists: [],
      chooseLists: [
        {
          title: "院校所属",
          typeList: [
            "全部",
            "北京",
            "天津",
            "河北",
            "山西",
            "内蒙古",
            "辽宁",
            "吉林",
            "黑龙江",
            "上海",
            "江苏",
            "浙江",
            "安徽",
            "福建",
            "江西",
            "山东",
            "河南",
            "湖北",
            "广东",
            "广西",
            "海南",
            "重庆",
            "四川",
            "贵州",
            "云南",
            "西藏",
            "陕西",
            "甘肃",
            "青海",
            "宁夏",
            "新疆",
          ],
        },
        {
          title: "院校类型",
          typeList: [
            "全部",
            "综合",
            "理工",
            "农业",
            "医药",
            "师范",
            "语言",
            "财经",
            "政法",
            "体育",
            "艺术",
            "民族",
            "军事",
            "其他",
          ],
        },
        {
          title: "办学类型",
          typeList: ["全部", "普通本科", "专科"],
        },
        {
          title: "院校特色",
          typeList: ["全部", "985", "211", "双一流"],
        },
      ],
      resultLists: [],
      // 信息选择
      infoForm: {
        batch: "",
        type: "",
      },
      batchList: [
        {
          value: "本科一批",
        },
        {
          value: "本科二批",
        },
        {
          value: "高职专科批",
        },
      ],
      yearList1: [
        {
          value: "2021",
        },
        {
          value: "2020",
        },
        {
          value: "2019",
        },
        {
          value: "2018",
        },
        {
          value: "2017",
        },
        {
          value: "2016",
        },
      ],
      typeList: [
        {
          value: "理科",
        },
        {
          value: "文科",
        },
      ],
    };
  },
  methods: {
    // 表格表头
    headClass() {
      //表头居中显示
      return "color:rgba(255, 101, 0);font-weight:bold;font-size:16px;text-align:center";
    },
    // 修改年份
    changeLineBatch() {
      this.getLists();
    },
    // 修改文理科
    changeLineType() {
      this.getLists();
    },
    // 点击筛选选项 自动获取数据
    listBundle: throttling(function (type, index) {
      this.stateLists.splice(index, 1, type);
      console.log(this.stateLists[index]);
      this.getLists();
    }, 200),
    // 分页
    handleCurrentChange(page) {
      this.pagination.page = page;
      this.getLists();
      console.log("跳转了");
    },
    // 获取数据
    getLists() {
      this.$axios
        .get("/openUniversity", {
          params: {
            province: this.stateLists[0],
            category: this.stateLists[1],
            type: this.stateLists[2],
            schoolFlag: this.stateLists[3],
            page: this.pagination.page,
            size: this.pagination.size,
            majorId: this.$route.params.id,
            type1: this.infoForm.type,
            batch: this.infoForm.batch,
          },
        })
        .then((res) => {
          console.log(res);
          this.resultLists = res.data.universityList;
          this.pagination.count = res.data.total;
        });
    },
    // 查看院校详情
    replace(element) {
      this.$router.replace(`/college/${element.unvId}`);
    },
  },
  created() {
    this.infoForm.batch = this.batchList[0].value;
    this.infoForm.type = this.typeList[0].value;
    this.getLists();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#openInstitutions {
  display: flex;
  height: 100%;
  flex-direction: column;
}

h2 {
  font-size: 20px;
  font-weight: bold;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #fff;
  margin: 1.6vh auto;
  flex: 1;
}

.text {
  font-size: 14px;
}

.item {
  padding: 2.9vh 0;
}

.searchArea {
  width: 100%;
  min-height: 45vh;
}

.searchchoose {
  width: 100%;
  height: 38.2vh;
}

.searchchoose ul {
  width: 74.1vw;
  margin-bottom: 0px;
  overflow: hidden;
  position: relative;
  padding-bottom: 1.3vh;
  left: 2.2vw;
  top: 1.6vh;
}

.searchchoose ul li {
  height: 8.1vh;
}

.searchchoose ul li:first-child {
  height: 13vh;
}

.searchchoose ul li .list-key {
  float: left;
  color: #000000;
  height: 3.9vh;
  line-height: 3.9vh;
  width: 4.8vw;
  font-size: 15px;
}

.choose {
  float: right;
  margin-right: 1.5vw;
}

.listSpan .iconfont {
  float: left;
  font-size: 14px;
  padding: 0.8vh 0.4vw 0px 0px;
  color: #999999;
}

.listSpan .more-search {
  position: absolute;
  float: left;
  width: 66.7vw;
  left: 7.4vw;
}

.listSpan .more-search .linkStyle {
  padding: 0px 1.5vw 2vh 0px;
  color: #999;
  display: inline-block;
  line-height: 3.9vh;
  font-size: 16px;
  transition: all 0.4s;
}

.listSpan .more-search span:hover {
  color: rgba(255, 101, 0);
  cursor: pointer;
}

.active {
  color: rgba(255, 101, 0);
}

.result {
  width: 100%;
}

.result #myTable {
  text-align: center;
  width: 100%;
  color: #55595f;
  font-size: 16px;
  border-collapse: collapse;
}

.result #myTable .line {
  margin-left: 0.4vw;
  height: 16.3vh;
  float: left;
  width: 49%;
  margin-bottom: 0.8vh;
}

.el-popover {
  width: 7.4vw;
}

.school_icon {
  float: left;
  width: 3.7vw;
  text-align: left;
}

.school_icon img {
  width: 100%;
}

.name_des {
  float: left;
  margin-left: 0.7vw;
  margin-bottom: 1.6vh;
}

.icon {
  width: 1.9vw;
}
.close-icon {
  content: url("../../../assets/特色推荐.png");
}

.name_des .top_item {
  margin-bottom: 1.6vh;
  height: 4.2vh;
  line-height: 4.2vh;
  display: flex;
}

.link_name {
  color: #333;
  font-size: 18px;
  height: 4.2vh;
  line-height: 4.2vh;
  display: inline-block;
  margin-right: 0.7vw;
}

.link_name:hover {
  color: rgba(255, 101, 0);
}

.am_l {
  transition: all 0.4s;
}

.float_l {
  float: left;
}

.right_l {
  float: right;
}

.top_item .link_ame .city {
  height: 4.2vh;
  line-height: 4.2vh;
  font-size: 12px;
  border: 1px solid #eeeeee;
  color: #555555;
  padding: 0 0.7vw;
  margin: 0 1.5vw 0 1.1vw;
  vertical-align: top;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.bottom_item .tag_item {
  float: left;
  color: #555555;
  font-size: 14px;
  padding-right: 0.7vw;
  margin-right: 0.7vw;
  border-right: 1px solid #c5c5c5;
  line-height: 2.4vh;
  cursor: pointer;
}

.overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 5.2vw;
  height: 2.4vh;
  display: inline-block;
}

.pagination {
  width: 29.7vw;
  margin: 0.7vh auto;
  height: 6.5vh;
  line-height: 6.5vh;
}
</style>
